<template>
  <div class="user-management-container">
    <h1 class="page-title">用户管理</h1>

    <div class="user-form">
      <div class="form-group">
        <label for="username" class="form-label">用户名</label>
        <input
            type="text"
            id="username"
            v-model="username"
            class="form-input"
            placeholder="请输入用户名"
        >
      </div>

      <div class="form-group">
        <label for="password" class="form-label">新密码</label>
        <input
            type="password"
            id="password"
            v-model="password"
            class="form-input"
            placeholder="请输入新密码"
        >
      </div>

      <div class="button-group">
        <button class="cancel-btn" @click="goBack">取消</button>
        <button class="submit-btn" @click="updateUserPassword">更新密码</button>
      </div>

      <div v-if="message" class="message" :class="{ 'success': isSuccess, 'error': !isSuccess }">
        {{ message }}
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';

export default {
  setup() {
    const router = useRouter();
    const username = ref('');
    const password = ref('');
    const message = ref('');
    const isSuccess = ref(false);
    const token = sessionStorage.getItem('jwt');

    const updateUserPassword = async () => {
      if (!username.value || !password.value) {
        message.value = '用户名和密码不能为空';
        isSuccess.value = false;
        return;
      }

      try {
        const response = await axios.post('/password', {
          username: username.value,
          password: password.value
        }, {
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token.slice(1,-1)}`  // 添加认证令牌
          }
        });

        if (response.status === 200) {
          message.value = '密码更新成功';
          isSuccess.value = true;
          username.value = '';
          password.value = '';
          router.go(-1);
        } else {
          message.value = response.data.message || '密码更新失败';
          isSuccess.value = false;
        }
      } catch (error) {
        if (error.response) {
          message.value = error.response.data.message || '密码更新失败';
        } else if (error.request) {
          message.value = '网络错误，请检查连接';
        } else {
          message.value = '请求失败，请重试';
        }
        isSuccess.value = false;
        console.error('更新密码失败:', error);
      }
    };

    const goBack = () => {
      router.go(-1);
    };

    return {
      username,
      password,
      message,
      isSuccess,
      updateUserPassword,
      goBack
    };
  }
}
</script>

<style scoped>
.user-management-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  min-height: 100vh;
  background-color: #f8f9fa;
}

.page-title {
  text-align: center;
  color: #2c3e50;
  margin-bottom: 2rem;
  font-size: 2rem;
}

.user-form {
  background-color: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #2c3e50;
}

.form-input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  transition: border-color 0.3s;
}

.form-input:focus {
  outline: none;
  border-color: #4a90e2;
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

.button-group {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.submit-btn {
  flex: 2;
  padding: 0.75rem;
  background-color: #4a90e2;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s;
}

.submit-btn:hover {
  background-color: #3a7bc8;
}

.submit-btn:active {
  background-color: #2c6bb7;
}

.cancel-btn {
  flex: 1;
  padding: 0.75rem;
  background-color: #6c757d;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s;
}

.cancel-btn:hover {
  background-color: #5a6268;
}

.cancel-btn:active {
  background-color: #545b62;
}

.message {
  margin-top: 1rem;
  padding: 0.75rem;
  border-radius: 4px;
  text-align: center;
}

.success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

@media (max-width: 600px) {
  .user-management-container {
    padding: 1rem;
  }

  .page-title {
    font-size: 1.5rem;
  }

  .user-form {
    padding: 1.5rem;
  }

  .button-group {
    flex-direction: column;
  }

  .submit-btn,
  .cancel-btn {
    width: 100%;
  }
}
</style>